<template>
  <div class="login">
    <!-- 登录界面 -->
    <!--  -->
        <div class="login-info">
            <div class="login-item">
                <div class="font28">博江 - 即时通讯</div>
            </div>
            <!-- 账号 -->
            <div class="login-item">
                <input v-model="form.username" type="text" placeholder="用户名/手机号">
            </div>
               <div class="login-item">
                <input v-model="form.password"  type="password" placeholder="登录密码">
            </div>

            <!-- 登录 -->
            <div class="login-btn">
                <button type="button" class="login-btn-item" @click="login"> 登录</button>
            </div>

        </div>
  </div>
</template>
<script>
import { showToast } from '@/utils/comm';
import {ApiLogin} from '@/api/api/login'
import Storage from '@/utils/storage'
export default {
  name: "login",
  // mixins: [baseMixin],
  data() {
    return {
        form: {
        username: Storage.get('username') || '',
        password: "",
      },
    };
  },
  methods: {
    //发起登录
    login() {
        if(!this.form.username){
            showToast('请输入用户名或者手机号');
            return;
        }
         if(!this.form.password){
            showToast('请输入登录密码')
            return;
        }
        ApiLogin(this.form).then(({data,msg})=>{
            let token = data?.token || ''
            let uid = data?.uid || ''
            Storage.set('token',token)
            Storage.set('uid',uid)
            Storage.set('username',this.form.username)
            //设置vuex
            this.$store.commit("setData", {key:'uid',value:uid});
            
            showToast(msg)
            setTimeout(()=>{
                this.$router.push('/?init=1')
            },800)
        })
    },
  },
  //子模板
  components: {},
};
</script>
<style >
.login{
    position: fixed;
    background-color: #eee;
    width: 100%;
    height: 100%;
    background-image: url('https://sinacloud.net/vue-wechat/images/bg/alarm.png');
     background-size: 100%;
}
.login-info{
    border: 1px solid #999;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    width: 80%;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    /* width: 50%; */
    transform: translateX(-50%) translateY(-50%);
}
.login-item{
    margin: 15px 0px;
}
.login-item input{
    width: 100%;
    border: 1px solid #e8e8e8;
    height: 35px;
    text-indent:10px;
}
.login-btn{
    width: 100%;   
}
.login-btn-item{
    width: 200px;
    height: 35px;
    border-radius: 35px;
    border: 0px;
    background-color: #FF5722;
    color: #fff;
}
.font28{
    font-size: 24px;
}
</style>